<template>
  <div>
    <blog-drawor class="drawor"></blog-drawor>
    <blog-header></blog-header>
    <el-card class="blogCard">
  <h2 class="article">更新你的文章吧！</h2>
      <div class="box_title">
        <img :src="releaseFrom.covers_img"
             alt="">
      </div>
      <!-- // md -->
      <div class="markdown">
        <el-form ref="releaseRef"
                 :model="releaseFrom"
                 :rules="releaseFromRules"
                 label-width="65px">
          <el-form-item label="分类："
                        prop="cate_id"
                        class="title_cate_id">
            <el-select v-model="releaseFrom.cate_id"
                       placeholder="请选择文章分类">
              <el-option label="技术"
                         value="1"></el-option>
              <el-option label="笔记"
                         value="2"></el-option>
              <el-option label="生活"
                         value="3"></el-option>
              <el-option label="兴趣"
                         value="4"></el-option>
            </el-select>
          </el-form-item>
          <div class="container">
            <el-form-item label="头图："
                          prop="covers_img"
                          class="title_img_input">
              <el-input v-model="releaseFrom.covers_img"
                        placeholder="请填写文章标题图片地址"></el-input>
            </el-form-item>
            <el-form-item label="标题："
                          prop="name">
              <el-input v-model="releaseFrom.name"
                        placeholder="请填写文章标题"></el-input>
            </el-form-item>
            <el-form-item label="概述："
                          prop="title">
              <el-input v-model="releaseFrom.title"
                        placeholder="请填写文章概述"></el-input>
            </el-form-item>

            <mavon-editor v-model="releaseFrom.content"
                          ref="md"
                          @change="change"
                          style="min-height: 600px" />
            <br>
            <el-button @click="submit">更新文章</el-button>
          </div>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import blogHeader from './blogHeader.vue'
import blogDrawor from './blogDrawor.vue'
// import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
  name: 'Update',
  components: { blogHeader, blogDrawor },

  data () {
    return {
      html: '',
      configs: {},
      releaseFrom: {
        name: '',
        content: '',
        title: '',
        cate_id: '',
        covers_img: '',
        state: '已发布'
      },
      // 验证规则
      releaseFromRules: {
        name: [{ required: true, message: '请输入文章名称', trigger: 'blur' }],
        title: [{ required: true, message: '请输入文章概述', trigger: 'blur' }],
        covers_img: [
          {
            required: true,
            message: '请输入文章标题图片地址',
            trigger: 'blur'
          }
        ],
        cate_id: [
          {
            required: true,
            message: '请输入文章标题图片地址',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  // 生命周期函数
  created () {
    this.git_list()
  },
  // 处理函数
  methods: {
    // 添加图片
    handleAvatarSuccess (res, file) {
      this.title_img = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传文章标题图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传文章标题图片大小不能超过 2MB!')
      }
      console.log(this.releaseFrom)
      return isJPG && isLt2M
    },
    change (value, render) {
      // render 为 markdown 解析后的结果[html]
      this.html = render
    },
    // 获取文章内容
    async git_list () {
      const id = window.sessionStorage.getItem('id')
      const { data: res } = await this.$http.get('/my/article/' + id)
      if (res.status !== 0) return this.$message.error('获取文章内容失败')
      this.$message.success('开始更新你的文章吧！')
      this.releaseFrom = res.data
    //   console.log(this.releaseFrom)
    },
    // 提交更新
    async submit () {
      delete this.releaseFrom.pub_date
      delete this.releaseFrom.author_id
      this.releaseFrom.state = '已发布'
      const { data: res } = await this.$http.post('/my/article/edit',
        this.releaseFrom
      )
      if (res.status !== 0) return this.$message.error('更新文章失败')
      this.$message.success('更新文章成功！')
      this.$router.push('/management')
    }
  }
}
</script>

<style lang="less" scoped>

.blog_blob {
  position: absolute;
  top: 0;
}
.box_title {
  width: 100px;
  height: 100px;
  border: 2px solid #000;
  position: absolute;
  top: 10px;
  right: 50px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 10px rgb(155, 154, 154);
  img {
    width: 100%;
    height: 100%;

  }
}
.title_img_input {
  width: 300px;
  position: absolute;
  top: 55px;
  left: 20px;
}
.title_cate_id {
  width: 230px;
  position: absolute;
  top: 55px;
  left: 340px;
}
</style>
